<script setup lang="ts">
import { computed } from 'vue'

type ButtonType = 'primary'

interface ButtonProps {
  type?: ButtonType;
  className?: string;
  disabled?: boolean;
}

const { type, className, disabled } = defineProps<ButtonProps>()

const typeClassName = computed(() => {
  let className = 'info'
  switch (type) {
    case 'primary':
      className = 'primary'
      break;
    default:
      break;
  }
  return className
})

</script>

<template>
  <button class="button" :disabled="disabled" :class="[ typeClassName, className ]" @click="$emit('click')">
    <slot></slot>
  </button>
</template>

<style scoped lang="less">
.button {
  border-radius: 4px;
  border: 1px solid @button-border-color;
  background-color: @button-bg;
  padding: 6px 12px;
  cursor: pointer;
  color: @button-text-color;
  transition: .2s;
  &:hover {
    border-color: @button-hover-border-color;
    color: @button-hover-text-color;
  }
}
.primary {
  background-color: @button-bg-primary;
  border-color: @button-border-color-primary;
  color: @button-text-color-primary;
  &:hover {
    border-color: @button-border-color-hover-primary;
    background-color: @button-bg-hover-primary;
    color: @button-text-color-primary;
  }
}
.button[disabled] {
  background-color: @button-bg-disabled;
  border-color: @button-border-diabled;
  cursor: not-allowed;
  &:hover {
    background-color: @button-bg-disabled;
    border-color: @button-border-diabled;
  }
}
</style>